<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <link rel="stylesheet" th:href="@{/talk.css}">
</head>
<body>
<div class="chat-container" id="app">
    <div class="chat-header">
        <h2>MuaGPT</h2>
    </div>
    <div class="chat-messages">
        <div v-for="(message, index) in chatHistory" :key="index" :class="['message', 'message-' + message.sender.toLowerCase()]">
            <div class="message-sender" v-if="message.sender === '我'">{{ message.sender }}</div>
            <div class="message-content" v-if="message.sender !== 'mua'">{{ message.content }}</div>
            <div class="message-sender" v-if="message.sender === 'mua'">{{ message.sender }}</div>
            <div class="message-content" v-if="message.sender === 'mua'">{{ response }}</div>
        </div>
    </div>
    <div class="chat-input">
        <input type="text" v-model="questionInput" placeholder="请输入消息...">
        <button @click="sendQuestion">发送</button>
        <button @click="clearContext">结束聊天</button>
    </div>
</div>

<script th:src="@{/js/vue/vue.global.js}"></script>
<script th:src="@{/jquery-3.4.1/jquery-3.4.1.min.js}"></script>
<script th:inline="javascript">
    let ctx = [[${#httpServletRequest.getContextPath()}]];
</script>

<script>
    const app = Vue.createApp({
        data() {
            return {
                questionInput: '',
                chatHistory: [],
                response: ''
            };
        },
        methods: {
            sendQuestion() {
                const question = this.questionInput;
                const url = ctx+'/chat?q=' + encodeURIComponent(question);

                fetch(url)
                    .then(response => {
                        if (response.ok) {
                            return response.json();
                        } else {
                            throw new Error('Request failed');
                        }
                    })
                    .then(response => {
                        const chatGPTResponse = response;

                        // 更新聊天历史
                        this.chatHistory.push({ sender: '我', content: question });
                        this.chatHistory.push({ sender: 'mua', content: chatGPTResponse });
                        this.response = chatGPTResponse.response;

                        // 清空输入框
                        this.questionInput = '';

                        // 滚动到底部
                        this.scrollToBottom();
                    })
                    .catch(error => {
                        console.error(error);
                    });
            },
            clearContext() {
                fetch(ctx+'clear-context', { method: 'POST' })
                    .then(response => {
                        if (response.ok) {
                            console.log('Context cleared');
                        } else {
                            throw new Error('Request failed');
                        }
                    })
                    .catch(error => {
                        console.error(error);
                    });
            },
            scrollToBottom() {
                // 滚动到聊天框底部
                const chatContainer = document.getElementById('app');
                chatContainer.scrollTop = chatContainer.scrollHeight;
            }
        },
        mounted() {
            // 滚动到底部
            this.scrollToBottom();
        }
    });

    app.mount('#app');
</script>

</body>

</html>